<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>打气球</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	<script src = './ZQ_Utils.js'></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        overflow: hidden;
        background-color: #ccc;
      }
      .balloon {
        position: absolute;
        top: 0;
        left: 0;
        width: 160px;
        height: 160px;
        background-color: #fafaf5;
        /* 左上 右上  右下 左下 */
        border-radius: 160px 160px 64px 160px;
        transform: rotate(45deg);
        /* x轴 y轴 羽化 半径 颜色 内外阴影 */
        box-shadow: -8px -8px 80px -8px #873940 inset;
      }
      .balloon::after {
        position: absolute;
        right: 0;
        bottom: 0;
        content: '';
        border: 8px solid transparent;
        border-right-color: #873940;
        transform: rotate(45deg);
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <!-- <div class="balloon"></div> -->
    <script>
      var bZ = 160,
        timer,
        balloons = [],
        wW = window.innerWidth,
        wH = window.innerHeight

      init(10)
      move()
      document.body.addEventListener(
        'click',
        function(e) {
          if (e.target.className.toLowerCase() === 'balloon') {
            var ele = e.target
            boom.call(
              ele,
              function() {
                ele.remove()
                init(1)
              }.bind(ele)
            )
          }
        },
        false
      )
      time = setInterval(move, 1000 / 60)
      function boom(cb) { // 全局作用域 故而需要call执行
        this.timer = setInterval(() => { //因为setInterval 是属于window对象，所以在执行里面的cb方法我们需要bind一下this
          if (this.offsetWidth < 10) {
            clearInterval(this.timer)
            cb && cb()
            return false
          }
          this.speed++
          this.style.top = this.offsetTop - this.speed + 'px'
          this.style.width = this.offsetWidth - 10 + 'px'
          this.style.height = this.offsetHeight - 10 + 'px'
        }, 1000 / 60)
      }
      function init(num) {
        var fragment = document.createDocumentFragment()
        for (var i = 0; i < num; i++) {
          var randomX = Math.abs(~~(Math.random() * wW) - bZ) //处理左右两处边界
          var oBalloon = document.createElement('div')
          oBalloon.classList.add('balloon')
          balloons.push(oBalloon)
          oBalloon.style.left = randomX + 'px'
          oBalloon.style.top = wH + 'px'
          oBalloon.speed = ~~(Math.random() * 8) + 1
          fragment.appendChild(oBalloon)
        }
        document.body.appendChild(fragment)
      }
      function move() {
        //移动
        for (var i = 0, item; (item = balloons[i++]); ) {
          item.style.top = item.offsetTop - item.speed + 'px'
          if (item.offsetTop < 0 - bZ) {
            item.style.top = wH + 'px'
          }
        }
      }
	  
      /*
        1、先造一个气球
        2、根据这一个气球我们就可以创造N个
          2.1、随机分散的放在屏幕底部
          2.2、每一个气球按不同的速度做上升动画
          2.3、飞出屏幕的时候再瞬间回到屏幕底部
        3、绑定点击事件
          3.1、皮球变小，速度加快上升
          3.2、小到一定程度的时候我们就移除这个气球元素，且重新创建一个上升
      */
    </script>
  </body>
</html>